<template>
  <!-- <el-table :data="doctorlist" style="width: 100%">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="department_name" label="科室名" />
    <el-table-column prop="hospital_name" label="医院名" />
    <el-table-column prop="description" label="简介" />
    <el-table-column prop="specialty" label="专长" />
    <el-table-column label="头像">
      <template #default="scope">
        <img :src="scope.row.doctor_avatar">
      </template>
    </el-table-column>
    <el-table-column label="查看">
      <template #default="scope">
        <el-button type="primary" @click="router.push({path: '/doctor_detail', query: {id: scope.row.id}})">查看</el-button>
      </template>
    </el-table-column>
  </el-table> -->
  <el-button type="primary" @click="router.push('/doctor_department')">返回科室选择</el-button>

  <div class="contentbox">
    <div class="doctorlist" v-for="(item, key) in doctorlist" :key="key">
      <div class="name">{{item.name}}</div>
      <div class="department_name">{{item.department_name}}</div>
      <div class="category">{{ item.category_display }}</div>
      <div class="hospital_name">{{item.hospital_name}}</div>
      <div class="description">简介：{{item.description}}</div>
      <div class="specialty">专长：{{item.specialty}}</div>
      <img class="avatar" :src="item.doctor_avatar" >
      <el-button class="button" type="primary" @click="router.push({path: '/doctor_detail', query: {id: item.id}})">查看</el-button>
    </div>
  </div>

</template>

<style scoped>
  html, body{
    background-color: #f0f0f0;
  }
  .contentbox{
    position: absolute;
    top:0;
    left: 375px;
    width: 768px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
  }
  .doctorlist{
    position: relative;
    width: 708px;
    padding: 30px;
    height: 200px;
  }
  .name{
    position:absolute;
    top: 30px;
    left: 100px;
    font-size: 30px;
    font-weight: bold;
  }
  .department_name{
    position:absolute;
    top: 80px;
    left: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  .category{
    position:absolute;
    top: 130px;
    left: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  .hospital_name{
    position:absolute;
    top: 80px;
    left: 180px;
    font-size: 20px;
    font-weight: bold;
  }
  .description{
    position:absolute;
    top: 180px;
    left: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  .specialty{
    position:absolute;
    top: 230px;
    left: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  .avatar{
    position:absolute;
    top: 30px;
    left: 30px;
    border-radius: 50%;
    width: 50px;
  }
  .button{
    position:absolute;
    bottom: 30px;
    right: 30px;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let doctorlist = ref([])

  const getdoctorlist=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/doctorDepartmentList/?department=${id}`)
    .then(res=>{
      console.log(res)
      doctorlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getdoctorlist()
  })

</script>
